<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <div th:fragment="userHead">
        <template id="userHead">
            <div>
                <add-user-modal :show_add_user_modal="isShowAddUserModal" @add_modal_close="add_modal_close"></add-user-modal>
                <el-row class="userIndex_elRow">
                    <el-col :span="1" class="UserIndex_elRow_col">
                        <el-button title="增用户" type="success" @click="addUserBtnHandle" size="mini">增</el-button>
                    </el-col>
                    <el-col :span="5" style="padding-right: 5px">
                        <el-date-picker style="width: fit-content" v-model="searchInfo.searchAllDate" value-format="yyyyMMdd" v-on:change="pickHandle" type="daterange" size="mini" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
                    </el-col>
                    <el-col :span="5">
                        <el-input size="mini" v-on:keyup.enter.native="handleEnter" v-model="searchInfo.seaInfo" placeholder="请输入内容，按Enter搜索..." suffix-icon="el-icon-search"></el-input>
                    </el-col>
                </el-row>
            </div>
        </template>
        <script>
            const UserHead = {
                template: '#userHead',
                components:{
                    'add-user-modal': AddUserModal,
                },
                data(){
                    return {
                        searchInfo: {
                            seaInfo: "",
                            startDate: "",
                            endDate: "",
                            searchAllDate: ""
                        },
                        isShowAddUserModal: false,
                        pickerOptions: {
                            shortcuts: [{
                                text: '最近一周',
                                onClick(picker) {
                                    const end = new Date();
                                    const start = new Date();
                                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                    picker.$emit('pick', [start, end]);
                                }
                            }, {
                                text: '最近一个月',
                                onClick(picker) {
                                    const end = new Date();
                                    const start = new Date();
                                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                    picker.$emit('pick', [start, end]);
                                }
                            }, {
                                text: '最近三个月',
                                onClick(picker) {
                                    const end = new Date();
                                    const start = new Date();
                                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                    picker.$emit('pick', [start, end]);
                                }
                            }]
                        },
                    }
                },
                methods:{
                    add_modal_close: function () {
                        this.isShowAddUserModal = false;
                    },
                    addUserBtnHandle: function () {
                        axios.post({
                            uri: ''
                        }).then({

                        }).finally()
                        if(!this.isShowAddUserModal){
                            this.isShowAddUserModal = true
                        }
                    },
                    handleEnter: function (e) {
                        console.log(this.searchInfo);
                    },
                    pickHandle: function (e) {
                        if(this.searchInfo.searchAllDate.length<=0){
                            this.searchInfo.startDate="";
                            this.searchInfo.endDate=""
                            return ;
                        }
                        this.searchInfo.startDate = this.searchInfo.searchAllDate[0];
                        this.searchInfo.endDate = this.searchInfo.searchAllDate[1];
                        console.log(this.searchInfo.searchAllDate);
                    },
                }
            }
        </script>
    </div>
</html>